
import React, { useEffect, useState } from 'react';
import axios from "axios";
import { useNavigate } from 'umi';
import { Table, Input, Pagination,Button } from "antd";
import './dictionary.css';
import {history} from "@@/core/history";

interface Dictionary {
    id: number;
    ZH: string;
    UY: string;
    EN: string;
}

const Dictionary: React.FC = () => {
    const [dictionaries, setDictionaries] = useState<Dictionary[]>([]);
    const [searchTerm, setSearchTerm] = useState<string>('');
    const [filteredDictionaries, setFilteredDictionaries] = useState<Dictionary[]>([]);
    const [currentPage, setCurrentPage] = useState<number>(1); // 当前页码
    const [pageSize, setPageSize] = useState<number>(8); // 每页显示条目数
    const token = localStorage.getItem('token');
    const navigate = useNavigate();

    useEffect(() => {
        axios.get('api/dictionary/all', {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        }).then(res => {
            setDictionaries(res.data);
            setFilteredDictionaries(res.data); // 初始化时显示所有数据
        }).catch(err => {

        });
    }, []);

    useEffect(() => {
        // 根据搜索关键词过滤数据
        const filtered = dictionaries.filter(dictionary =>
            dictionary.ZH.includes(searchTerm) ||
            dictionary.UY.includes(searchTerm) ||
            dictionary.EN.includes(searchTerm)
        );
        setFilteredDictionaries(filtered);
    }, [searchTerm, dictionaries]);

    const handleView = (id: number) => {
        navigate(`/details/${id}`);
    };

    const totalItems = filteredDictionaries.length;
    const startItem = (currentPage - 1) * pageSize;
    const endItem = startItem + pageSize;
    const paginatedItems = filteredDictionaries.slice(startItem, endItem);

    const onChange = (page: number) => {
        setCurrentPage(page);
    };

    const columns = [
        {
            title: '中文',
            dataIndex: 'ZH',
            key: 'ZH',
        },
        {
            title: 'ئۇيغۇرچە',
            dataIndex: 'UY',
            key: 'UY',
        },
        {
            title: 'English',
            dataIndex: 'EN',
            key: 'EN',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (
                <div>
                    <Button type="link" onClick={() => handleView(record.id)}>查看</Button>
                </div>
            ),
        },

    ];

    return (
        <div>
            <Input
                className="search-input"
                placeholder="请输入搜索关键词"
                onChange={(e) => setSearchTerm(e.target.value)}
            />

            <Table
                style={{ backgroundColor: 'white', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.01)' }}
                columns={columns}
                dataSource={paginatedItems}
                pagination={false}
            />
            <Pagination className="pagination-container"
                current={currentPage}
                pageSize={pageSize}
                total={totalItems}
                onChange={onChange}
            />
        </div>
    );
};

export default Dictionary;